<template>
  <div class="home">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎使用 Vue Element UI CRUD 演示系统</span>
        </div>
      </template>
      <div class="welcome-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="stat-card">
              <div class="stat-item">
                <el-icon class="stat-icon" color="#409eff"><User /></el-icon>
                <div class="stat-info">
                  <div class="stat-number">{{ userCount }}</div>
                  <div class="stat-label">用户总数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card">
              <div class="stat-item">
                <el-icon class="stat-icon" color="#67c23a"><Goods /></el-icon>
                <div class="stat-info">
                  <div class="stat-number">{{ productCount }}</div>
                  <div class="stat-label">商品总数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card">
              <div class="stat-item">
                <el-icon class="stat-icon" color="#e6a23c"><Document /></el-icon>
                <div class="stat-info">
                  <div class="stat-number">{{ orderCount }}</div>
                  <div class="stat-label">订单总数</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" class="mt-20">
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>系统功能</span>
              </template>
              <ul class="feature-list">
                <li><el-icon><Check /></el-icon> 用户管理 - 增删查改功能</li>
                <li><el-icon><Check /></el-icon> 商品管理 - 完整CRUD操作</li>
                <li><el-icon><Check /></el-icon> 数据分页 - 支持大量数据展示</li>
                <li><el-icon><Check /></el-icon> 搜索过滤 - 快速定位数据</li>
                <li><el-icon><Check /></el-icon> 表单验证 - 确保数据完整性</li>
              </ul>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>技术栈</span>
              </template>
              <ul class="tech-list">
                <li><el-tag type="primary">Vue 3</el-tag></li>
                <li><el-tag type="success">Element Plus</el-tag></li>
                <li><el-tag type="info">Vue Router</el-tag></li>
                <li><el-tag type="warning">Vite</el-tag></li>
                <li><el-tag type="danger">JavaScript ES6+</el-tag></li>
              </ul>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      userCount: 156,
      productCount: 89,
      orderCount: 234
    }
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.stat-card {
  height: 120px;
}

.stat-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  font-size: 40px;
  margin-right: 20px;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #333;
}

.feature-list li .el-icon {
  margin-right: 10px;
  color: #67c23a;
}

.tech-list {
  list-style: none;
  padding: 0;
}

.tech-list li {
  margin-bottom: 10px;
}

.mt-20 {
  margin-top: 20px;
}
</style>